<!--交易记录-->

<template>
	<div class="buyrecord">
		<div class="my_header">
			<i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="$router.back(-1)"></i>
			<div class="top1">购买记录</div>
			
		</div>
		<div class="jyrecord">			
			<div class="row" v-for="item in recordList" :key="item.record_id">
				<div @click="gobuydetail(item.record_id)">
				<div class="left">{{item.add_time}}</div>
				<div class="right">{{item.name}}<img src="static/imgs/icon_more.png"></div>
				</div>
			</div>
			<!-- <div class="row">
				<router-link to="/tractiondetal">
				<div class="left">2018-05-10 10:30:29</div>
				<div class="right">基础套餐<img src="../../../static/imgs/icon_more.png"></div>
				</router-link>
			</div> -->
		</div>
		
	</div>
	
</template>

<script>
export default {
	data() {
		return {
			recordList:[]
		}
	},
	created () {
		//购买记录
		var that = this
		$.ajax({
			url:'http://zcapi.hrgsxt.cn/api/User_record/buy',
			type:'get',
			dataType:'json',
			data:{
				token:localStorage.getItem("token")
			},
			success: function (res) {
				console.log(res)
				that.recordList = res.data  //将数据给recordList
				console.log(that.recordList)
			}

		})
	},
	methods: {
		gobuydetail(aa){
				var that=this;			
				that.$router.push({
					path: './buydetail',
					query: {
						tabitem: aa
						
					}
				});
			},
	},
	watch: {
			// 如果路由有变化，会再次执行该方法
			'$route': 'fetchData'
		}
	
}
</script>

<style scoped>
	/*头部*/
		.my_header {
		height: .88rem;
		background: rgba(0, 133, 240, 1);
		text-align: center;
		color: #fff;
		line-height: .88rem;
		position: relative;
		padding: 0 .3rem;
		width: 100%;
		position:fixed;
		z-index: 999;
		top: 0;
	}
	.buyrecord{
		padding-top: 0.88rem;
	}

	
	.my_header i {
		font-size: .4rem;
		float: left;
		line-height: .88rem;
	}
	
	 .my_header .top1 {
		width: 40%;
		margin-left: 25%;
		float: left;
		text-align: center;
	}
	

	
	/*查询记录*/
	.jyrecord{
		margin-top: 0px !important;
		width: 100%;
		font-size:0.26rem !important;
	  background-color: #FFFFFF;
		
	}
	.jyrecord .row{
		/*margin-left: 20px;*/
	}

	.jyrecord .row {
		width: 100%;
		height: 0.88rem;
		background-color: #FFFFFF;
		line-height: 0.88rem;
		padding: 0px 0.3rem 0px 0.3rem;		
		border-bottom: 1px solid #efefef;
	}
	
	
	
	.jyrecord .row .left {
		width: 50%;
		float: left;
		font-size: 0.28rem;
		color: #666666;
	}
	
	.jyrecord .row .right {
		color: #666666;
		width: 50%;
		float: right;
		font-size: 0.28rem;
		line-height: 0.88rem;
		text-align: right;
	}
	
	.jyrecord .row .right img {
		width: 0.14rem;
		height: 0.24rem;
		vertical-align: middle;
		margin-left: 7px;
		margin-bottom: 3px;
	}
	
	.jyrecord .row .right input {
		border: none;
		outline: none;
		text-indent: 4em;
		text-align: right;
		padding-right: 0px !important;
	}
	
</style>